{% extends 'base.html' %}
{% block content %}
{#  头像  #}
    <div class="mdui-row mdui-m-t-5 mdui-m-b-3 mdui-m-t-3">
        <div class="mdui-center" style="width: 100px;">
            <img alt="avatar" class="mdui-img-fluid mdui-img-circle" src={{ url_for('static',filename='avatar.jpg') }}>
        </div>
    </div>
{#  标题  #}
    <h1 style="text-align: center" class="mdui-m-b-2 mdui-text-color-blue-900"><b>达芬奇の左邻右舍</b></h1>
{#  说明  #}
    <div class="mdui-row mdui-m-b-5 mdui-text-color-blue-grey">
        <div class="mdui-col-xs-0 mdui-col-sm-4"></div>
        <div class="mdui-col-xs-12 mdui-col-sm-4">
            <div class="mdui-divider mdui-m-b-2"></div>
            <p class="mdui-m-b-2 mdui-text-color-blue-grey" style="font-weight: 300;">
                嗨嗨~这里是Davinci哦ヾ(^▽^*)))~<br>
                请想要交换友链的小伙伴根据下面的格式给我留言嗷！<br><br>
                <i class="mdui-icon material-icons">&#xe838;</i> Name：Davinci<br>
                <i class="mdui-icon material-icons">&#xe88a;</i> Bio：<a class="mdui-text-color-pink" href="https://davincievans.top" target="_blank">Davinci的红茶馆</a><br>
                <i class="mdui-icon material-icons">&#xe866;</i> Motto：我只是一个追逐群星的孩子，注视着天空中千万繁星的诞生。<br>
                <i class="mdui-icon material-icons">&#xe7fd;</i> Avatar：<a class="mdui-text-color-pink" href="http://gallery.davincievans.top/images/2020/02/04/a43bfc8c52ef8134a7ecce3ae5e0262d_2_3_art.jpg" target="_blank">Click!</a>（至少256 * 256，最大5M)<br>
                <i class="mdui-icon material-icons">&#xe0be;</i> E-mail：me@davincievans.top<br><br>
                谢谢资瓷(。・∀・)ノ
            </p>
            <div class="mdui-divider mdui-m-b-4"></div>
        </div>
    </div>
    <div class="mdui-container mdui-p-l-0 mdui-p-r-0" id="friendlist" style="display: none">
    <div class="mdui-row-sm-4 mdui-row-xs-1">
    {% for friend in friendList %}
        <div class="mdui-col mdui-m-b-3 mdui-p-l-0 mdui-p-r-0">
        <div class="mdui-col-xs-1 "></div>
        <div class="mdui-card mdui-col-xs-10 mdui-hoverable mdui-p-l-0 mdui-p-r-0" style="border-radius: 5px">
        <a target="_blank" href={{ friend["link"] }}>
            <div class="mdui-card-media avatarDiv">
                <img alt="avatar" class="mdui-img-fluid avatar" src={{ friend["avatar"] }}>
            </div></a>
            <div class="mdui-card-primary mdui-p-t-1 mdui-p-b-2 mdui-p-l-1 mdui-p-r-1">
                <div class="mdui-card-primary-title mdui-text-truncate"><small><small>{{ friend["name"] }}</small></small></div>
                <div class="mdui-card-primary-subtitle mdui-text-truncate"><small>{{ friend["motto"] }}</small></div>
            </div>

            {% if current_user.is_authenticated  %}
            <div class="mdui-card-actions">
            <form method="get"  style="display: inline;" action={{ url_for("edit", id=friend.id) }}>
                <button type="submit" name="edit" value="edit" class="mdui-btn mdui-ripple mdui-color-theme-accent">EDIT</button></form>
            <form method="post" style="display: inline" action={{ url_for("delete", id=friend.id) }}>
                <button onclick="return confirm('确定删除？')" class="mdui-btn mdui-btn-icon mdui-float-right" type="submit" name="delete" value="Delete">
                    <i class="mdui-icon material-icons">&#xe872;</i></button></form>
            </div>
            {% endif %}
        </div>

        </div>
    {% endfor %}
    {% if current_user.is_authenticated %}
    <div class="mdui-col mdui-m-b-3 mdui-p-l-0 mdui-p-r-0">
        <div class="mdui-col-xs-1 "></div>
        <div class="mdui-card mdui-col-xs-10 mdui-hoverable mdui-p-l-0 mdui-p-r-0" style="border-radius: 5px">
        <a target="_blank" href={{ url_for("add") }}>
            <div class="mdui-card-media">
                <img alt="avatar" class="mdui-img-fluid" src={{ url_for("get_file", filename="unknown.png") }}>
            </div></a>
            <div class="mdui-card-primary mdui-p-t-1 mdui-p-b-2 mdui-p-l-1 mdui-p-r-1">
                <div class="mdui-card-primary-title mdui-text-truncate mdui-text-center"><small><small>添加新伙伴(｡･∀･)ﾉﾞ</small></small></div>
                <div class="mdui-card-primary-subtitle mdui-text-truncate mdui-text-center"><small>↓↓↓戳这个↓↓↓</small></div>
            </div>

            {% if current_user.is_authenticated  %}
            <div class="mdui-card-actions">
            <form method="get" action={{ url_for("add") }}>
                <button type="submit" name="add" value="add" class="mdui-btn mdui-ripple mdui-btn-block">ADD</button></form>
            {% endif %}
    {% endif %}
    </div>
    </div>
    </div>
    </div>
    </div>
{% endblock %}